<template>
	<view class="container">
		<view v-if="!isLeader" @click="clickItem(0)" class="item">
			<view class="icon">
				<image v-if="activeIndex === 0" src="@/static/homeSelect.png" class="iconImage" mode="" />
				<image v-else src="@/static/home.png" class="iconImage" mode="" />
			</view>
			<view :class="{'title':true,'isSelect':activeIndex === 0}">
				首页
			</view>
		</view>
		<view v-if="!isLeader" @click="clickItem(1)" class="item">
			<view class="icon">
				<image v-if="activeIndex === 1" src="@/static/fenleiSelect.png" class="iconImage" mode="" />
				<image v-else src="@/static/fenlei.png" class="iconImage" mode="" />
			</view>
			<view :class="{'title':true,'isSelect':activeIndex === 1}">
				分类
			</view>
		</view>
		<view v-if="!isLeader" @click="clickItem(2)" class="item">
			<view class="icon">
				<image v-if="activeIndex === 2" src="@/static/buySelect.png" class="iconImage" mode="" />
				<image v-else src="@/static/buy.png" class="iconImage" mode="" />
			</view>
			<view :class="{'title':true,'isSelect':activeIndex === 2}">
				购物车
			</view>
		</view>
		<view v-if="!isLeader" @click="clickItem(3)" class="item">
			<view class="icon">
				<image v-if="activeIndex === 3" src="@/static/mineSelect.png" class="iconImage" mode="" />
				<image v-else src="@/static/mine.png" class="iconImage" mode="" />
			</view>
			<view :class="{'title':true,'isSelect':activeIndex === 3}">
				我的
			</view>
		</view>
		<view v-if="isLeader" @click="clickItem(4)" class="item">
			<view class="icon">
				<image v-if="activeIndex === 4" src="@/static/orderSelect.png" class="iconImage" mode="" />
				<image v-else src="@/static/order.png" class="iconImage" mode="" />
			</view>
			<view :class="{'title':true,'isSelect':activeIndex === 4}">
				订单
			</view>
		</view>
		<view v-if="isLeader" @click="clickItem(5)" class="item">
			<view class="icon">
				<image v-if="activeIndex === 5" src="@/static/infoSelect.png" class="iconImage" mode="" />
				<image v-else src="@/static/info.png" class="iconImage" mode="" />
			</view>
			<view :class="{'title':true,'isSelect':activeIndex === 5}">
				反馈
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Tabbar",
		data() {
			return {

				isLeader: uni.getStorageSync('isLeader')
			};
		},
		props: {
			activeIndex: {
				type: String | Number,
				default: 0,
			}
		},

		methods: {
			clickItem(id) {

				console.log(this.activeIndex)
				switch (id) {
					case 0:
						uni.switchTab({
							url: '/pages/homePage/index'
						})
						break;
					case 1:

						uni.switchTab({
							url: '/pages/productCategory/productCategory'
						})
						break;
					case 2:
						uni.switchTab({
							url: '/pages/shoppingCart/index'
						})
						break;
					case 3:
						uni.switchTab({
							url: '/pages/mine/index'
						})
						break;
					case 4:
						uni.switchTab({
							url: '/pages/orderCenter/orderCenter'
						})
						break;
					case 5:
						uni.switchTab({
							url: '/pages/feedback/feedback'
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>